{/* LAYOUT模板 */}
<layout name="layout"/>
{/* import Js,Css */}	
<css href="__THEMES__/css/common.css"/>
<css href="__PLUGS__/swipe/dist/css/swiper.min.css"/>
<js  href="__PLUGS__/swipe/dist/js/swiper.min.js" />
<css href="__PLUGS__/stickup/stickup.css"/>
<js  href="__PLUGS__/stickup/stickUp.min.js" />

<style>
html, body {
    position: relative;
    height: 100%;
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
</style>

<div class="nav-list">
	<div class="pro-wrap w_1200 mauto clearfix">
		<div class="left fl">
			<span>
				WIFI 家听宝
			</span>
		</div>
		<div class="right fr">
			<ul class="func-list" >
				<li>
					<a href="#waiguan" class="current">外观</a>
				</li>
				<li>
					<a href="#gongneng">功能</a>
				</li>
				<li>
					<a href="#yongtu">用途</a>
				</li>
				<li>
					<a href="#xingjiabi">性价比</a>
				</li>
				<span class="buy_now">
					<a href="{:U('goods/item')}?id=40">立刻购买</a>
				</span>
			</ul>
		</div>
	</div>
</div>
<div class="space10"></div>
<div id="waiguan" class="swiper-container" >
    <div class="swiper-wrapper">
        <div id="swiper1" class="swiper-slide">
			<div style="width:100%;height:100%;background:#bef258;">
				<div class="w_1200 mauto" style="height:100%; position:relative;">
					<img src="__IMG__/front/yinxiang-1.png" style="position:absolute;top:300px;left:0px;"/>
					<div style="position:absolute;width:100%;top:50px;color:#7a8a4b">
						<span style="display:block;font-size:35px;width:100%;text-align:left;text-indent:150px;">外观 • 古典端庄 • 复古风</span>
						<span style="display:block;font-size:20px;width:100%;text-align:left;text-indent:200px;margin-top:15px;"></span>
					</div>
				</div>
			</div>
        </div>
        <div class="swiper-slide">
        	<div style="width:100%;height:100%;background:#74e885;">
				<div class="w_1200 mauto" style="height:100%; position:relative;">
					<div style="position:relative;">
						<img src="__IMG__/front/yinxiang.png" style="position:absolute;top:300px;left:200px;"/>
					</div>
					<div style="position:absolute;width:100%;top:50px;color:#FFFFFF">
						<span style="display:block;font-size:35px;width:100%;text-align:left;text-indent:150px;">触摸 • 电容式 • 光滑触摸屏</span>
						<span style="display:block;font-size:20px;width:100%;text-align:left;text-indent:200px;margin-top:15px"></span>
					</div>
				</div>
			</div>
        </div>
    </div>
    <div class="swiper-pagination swiper-pagination-4"></div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
<script type="text/javascript">
	var swiper = new Swiper('.swiper-container', {
	    pagination: '.swiper-pagination-4',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 3000,
        effect: 'fade',
        autoplayDisableOnInteraction: false
	});
</script>


<style type="text/css">
.yx-func-wrap{
	width:1200px;
	margin:auto;
	color:#404040;
	margin-top:100px;
}
.yx-func-wrap ul{
	list-style:none;
}
.yx-func-wrap li{
	display:block;
	float:left;
	width:33.3%;
	height:200px;
	position: relative;
	
}
.yx-func-wrap li span{
	display: block;
	width: 100px;
	height:100px;
	left:50px;
	top:50px;
	position: absolute;
	background:url(__IMG__/front/yx-func-icons.png) no-repeat 0px 0px;
}
.yx-func-wrap li div{
	margin-top:50px;
	text-align: left;
}
.yx-func-wrap li .text{
	margin-left: 170px;
}
.yx-func-wrap .onekey{
	background-position: 0px 0px;
}
.yx-func-wrap .timer{
	background-position: -100px 0px;
}
.yx-func-wrap .educate{
	background-position: -200px 0px;
}
.yx-func-wrap .service{
	background-position: -300px 0px;
}
.yx-func-wrap .control{
	background-position: -400px 0px;
}
.yx-func-wrap .luyou{
	background-position: -500px 0px;
}
</style>

<div id="gongneng" class="swiper-container swiper3">
    <div class="swiper-wrapper" >
        <div class="swiper-slide" style="background:#F0F0F0;">
			<div class="w_1200 mauto" style="height:100%;position:relative;">
				<div style="position:absolute;width:100%;top:100px;color:#FFFFFF">
					<span style="display:block;font-size:40px;width:100%;color:#03BEFF">功能 • 特色  </span>		
					<div class="yx-func-wrap clearfix">
						<ul>
							<li>
								<span class="onekey"></span>
								<div class="text">
									<h3 style="color:#404040;">一键连接</h3>
									<p style="color:#ADADAD;">
										手机控制设备连接家庭路由,一次配置,以后自动连接
									</p>
								</div>
							</li>
							<li>
								<span class="timer"></span>
								<div class="text">
									<h3 style="color:#404040;">定时播放</h3>
									<p style="color:#ADADAD;">
										用户可以定制任意时间段播放,并推送到设备保存
									</p>
								</div>
							</li>
							<li>
								<span class="educate"></span>
								<div class="text">
									<h3 style="color:#404040;">在线教育</h3>
									<p style="color:#ADADAD;">
										内含50万精品有声读物,含国学、诗词、儿童故事、文学读物等
									</p>
								</div>
							</li>
							<li>
								<span class="service"></span>
								<div class="text">
									<h3 style="color:#404040;">定时套餐服务</h3>
									<p style="color:#ADADAD;">
										精准的在线定时套餐,帮助孩子更准确的学习课本知识,帮助孩子养成按时学习的习惯
									</p>
								</div>
							</li>
							<li>
								<span class="control"></span>
								<div class="text">
									<h3 style="color:#404040;">远程控制</h3>
									<p style="color:#ADADAD;">
										不论在哪里,都可以轻松知道设备在干什么,帮助孩子学习不再是距离问题
									</p>
								</div>
							</li>
							<li>
								<span class="luyou"></span>
								<div class="text">
									<h3 style="color:#404040;">智能无线路由</h3>
									<p style="color:#ADADAD;">
										可以当路由器使用,传输速率高达300MB
									</p>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
        </div>
    </div>
    <div class="swiper-pagination swiper-pagination-3"></div>
</div>
<script>
	var swiper = new Swiper('.swiper3', {
	    pagination: '.swiper-pagination-3',
    	paginationClickable: false
	});
</script>



<div id="yongtu" class="swiper-container swiper5" >
    <div class="swiper-wrapper" >
        <div class="swiper-slide" style="background:#FFFFFF;">
			<div class="w_1200 mauto" style="height:100%;position:relative;">				
				<div style="position:absolute;width:100%;top:60px;color:#FFFFFF">
					<span style="display:block;font-size:40px;width:100%;color:#03BEFF">
						用途 • 环境教育 
						<a href="{:U('linian/index')}" style="font-size:16px;text-decoration:underline;color:#FFFFFF;font-weight:200;">什么是环境教育?去了解</a>
					</span>		
					<img src="__PLUGS__/swipe/img/112.jpg" />					
				</div>
			</div>
        </div>
    </div>
    <div class="swiper-pagination swiper-pagination-5"></div>
</div>
<script>
	var swiper = new Swiper('.swiper5', {
	    pagination: '.swiper-pagination-5',
    	paginationClickable: true
	});
</script>

<div id="xingjiabi" class="swiper-container swiper6">
    <div class="swiper-wrapper" >
        <div class="swiper-slide" style="background:#F0F0F0;">
			<div class="w_1200 mauto" style="height:100%;position:relative;">				
				<div style="position:absolute;width:100%;top:60px;color:#FFFFFF">
					<span style="display:block;font-size:40px;width:100%;font-weight:300;color:#404040;">
						性价比 • wifi 家听宝 VS 传统听读机 VS wifi音箱	
					</span>		
					<div class="mp20">
						<img src="__PLUGS__/swipe/img/113.png" />	
					</div>				
				</div>
			</div>
        </div>
    </div>
    <div class="swiper-pagination swiper-pagination-6"></div>
</div>

<script type="text/javascript">
  	jQuery(function($) {
		$(document).ready( function() {
		  	$('.nav-list').stickUp({
			    parts: {
			      0:'waiguan',
			      1:'gongyi',
			      2: 'gongneng',
			      3: 'yongtu',
			      4: 'xingjiabi',
			    },
			    itemClass: 'menuItem',
			    itemHover: 'active',
			    topMargin: 'auto'
		  	});
		  	$(document).height();
			  	var swiper = new Swiper('.swiper6', {
			    pagination: '.swiper-pagination-6',
		    	paginationClickable: true
			});
	  		$('.func-list').find('a').bind('click',function(n){
				$('.func-list').find('a').each(function(n){
					$(this).removeClass('current');
				});
				$(this).addClass('current');
			});
		});
  	});
</script>

<include file="Library:service"/>
<include file="Library:footer"/>











